<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        label {
            display: inline-block;
            width: 100px;
            text-align: right;
            margin-right: 10px;
        }

        select {
            padding: 5px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: 200px;
            margin-bottom: 10px;
        }
    </style>
</head>

<body>
    <label>选择省份：</label>
    <select id="province">
        <option value="">请选择</option>
        <option value="湖南省">湖南省</option>
        <option value="江西省">江西省</option>
        <option value="湖北省">湖北省</option>
        <!-- 其他省份选项 -->
    </select>
    <select id="city">
        <option value="">请选择</option>
        <!-- 根据省份选择对应的城市选项 -->
    </select>
    <select id="district">
        <option value="">请选择</option>
        <!-- 根据城市选择对应的县区选项 -->
    </select>
    <select id="street">
        <option value="">请选择</option>
        <!-- 根据县区选择对应的街道选项 -->
    </select>

    <script>
        // 省份、城市、县区、街道数据
        const data = {
            "湖南省": {
                "长沙市": {
                    "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                    "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                },
                "娄底市": {
                    "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                    "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                },
            },
            "江西省": {
                "南京市": {
                    "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                    "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                },
                "九江市": {
                    "东城区": ["东华门街道", "景山街道", "交道口街道", "安定门街道"],
                    "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                },
            },
            "湖北省": {
                "武汉市": {
                    "江夏区": ["光谷大道", "景山街道", "交道口街道", "安定门街道"],
                    "洪山区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                },
                "随州市": {
                    "曾都区": ["顺井大道", "景山街道", "交道口街道", "安定门街道"],
                    "西城区": ["西长安街街道", "新街口街道", "广安门内街道", "月坛街道"],
                }
            },
        };

        const province = document.getElementById("province");

        const city = document.getElementById("city");

        const district = document.getElementById("district");

        const street = document.getElementById("street");

        // 监听省份选项变化事件
        province.addEventListener("change", updateCity);
        // 监听城市选项变化事件
        city.addEventListener("change", updateDistrict);
        // 监听县区选项变化事件
        district.addEventListener("change", updateStreet);

        // 选择省份后更新城市选项
        function updateCity() {
            city.innerHTML = "";

            district.innerHTML = "";

            street.innerHTML = "";

            if (province.value == "") return;

            bian(data[this.value], city)

            updateDistrict.call(city);
        }

        // 选择城市后更新县区选项
        function updateDistrict() {

            district.innerHTML = "";

            bian(data[province.value][this.value], district)
            updateStreet.call(district);
        }

        // 选择县区后更新街道选项
        function updateStreet() {

            street.innerHTML = "";

            bian(data[province.value][city.value][this.value], street)

        }


        // 遍历添加
        function bian(obj, el) {
            for (let i in obj) {
                option = document.createElement("option");
                option.value = Array.isArray(obj) ? obj[i] : i;
                option.innerHTML = Array.isArray(obj) ? obj[i] : i;
                el.appendChild(option);
            }
        }
    </script>
</body>

</html>